<template>
    <div>
    <!-- div -->
        <p>年龄：{{age}}</p>
        <button @click="age++">增加年龄</button>
    <!-- reactive -->
        <p>姓名：{{user.name}}</p>
        <input placeholder="请输入姓名" v-model="user.name">
    <!-- 城市 -->
        <p>城市：{{city}}</p>
        <input placeholder="请输入城市" v-model="city">
    <!-- 邮箱 -->
        <p>邮箱：{{ email }}</p>
        <input placeholder="请输入邮箱" v-model="email">
    </div>
</template>

<script setup>
// ref
import { ref,reactive,toRef, toRefs } from 'vue';
const age = ref(25);

// reactive
const user = reactive ({
    name:"张三",
    address:{
        city:"北京",
        country:"中国"
    },
    email:"zhangsan@example.com"
})

// toRef
const city = toRef (user.address,"city")

// toRefs
const {email} = toRefs(user)

//定时器
setTimeout(() => {
    age.value++;
    user.name="李四";
    city.value="上海";
    email.value="lisi@example.com"
    // user.address.city="上海"
    // user.email="lisi@example.com"
}, 5000);
</script>

<style>
</style>